<template>
	<view id="ordinaryNew">
		<view class="ibody">
			<view class="top">
				<view class="banner">
					<view>个人不动产</view>
				</view>
				<view style="margin: 0 10px 10px;">
					<keyword :userId="userId" :productId="6">
						<template v-slot:head>
							<view id="head_text">结果会短信通知到填写的电话号码</view>
						</template>
						<template v-slot:tips>
							<view></view>
						</template>
					</keyword>
				</view>
			</view>
			<view class="explain">
				<view class="tit">
					检测内容说明
				</view>
				<view class="icon">
					<view class="flex">
						<view>
							<view class="img"><img src="@/static/images/3.png" alt="" /></view>
							<view class="text">权利类型坐落位置</view>
						</view>
						<view>
							<view class="img"><img src="@/static/images/2.png" alt="" /></view>
							<view class="text">查封抵押情况</view>
						</view>
						<view>
							<view class="img"><img src="@/static/images/6.png" alt="" /></view>
							<view class="text">用途/共有情况</view>
						</view>
						<view>
							<view class="img"><img src="@/static/images/4.png" alt="" /></view>
							<view class="text">更多 +6</view>
						</view>
					</view>
					
				</view>
				<view class="tit">
					为什么我们更专业
				</view>
				<view class="list">
					<view class="flex">
						<view class="box">
							<img src="@/static/images/22.png" alt="" />
						</view>
						<view class="info">
							<view class="s_tit">1.安全</view>
							<view class="">平台采用DSE技术,数据加密系统，时刻保护您的信息安全。</view>
						</view>
					</view>
					<view class="flex">
						<view class="box">
							<img src="@/static/images/22.png" alt="" />
						</view>
						<view class="info">
							<view class="s_tit">2.精准</view>
							<view class="">数据来源于各大权威机构,帮您全方位检测信用问题,及时发现信用缺陷。</view>
						</view>
					</view>
					<view class="flex">
						<view class="box">
							<img src="@/static/images/33.png" alt="" />
						</view>
						<view class="info">
							<view class="s_tit">3.专业</view>
							<view class="">千万用户的第一选择,用最专业的数据分析与优化方案竭诚为您保驾护航。</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import keyword from '@/components/keyword.vue'

	export default {
		components: {
			keyword
		},
		data() {
			return {
				userId: undefined,
				remark: undefined
			}
		},
		onLoad(event) {
			// 若不来自推荐，算作管理员的
			this.userId = event.ui ? event.ui : 1
			this.remark = event.ui ? null : '无推送'
		}
	}
</script>

<style lang="scss">
	#ordinaryNew {
		width: 100%;
		background-color: #f5f5f5;
		position: relative;

		.ibody {

			.top {
				.banner {
					text-align: center;
					padding: 40px 0 0 0;
					background-color: #3b61e9;
					border-radius: 5px;
					height: 300px;
					margin-bottom: -110px;
					color: rgba(255, 255, 255, 0.788);
					font-size: 16px;
				}
			}

			.explain {
				margin: 0 10px;
				background-color: #fff;
				border-radius: 10px;
				padding: 25px 10px;

				.tit {
					text-align: center;
					font-size: 20px;
					color: #375fe8;
					line-height: 28px;
					margin-bottom: 17px;
				}

				.icon {
					margin-bottom: 17px;

					.flex {
						justify-content: space-around;

						.flex:last-child {
							margin-top: 15px;
						}

						.img {
							width: 40px;
							height: 40px;
							margin: 0 auto 12px;

							img {
								width: 100%;
								height: 100%;
							}
						}
					}


					.text {
						font-size: 12px;
						color: #999;
						line-height: 17px;
					}
				}

				.list {
					.flex {
						.box {
							width: 80px;
							height: 80px;
							margin: 0 30px 0 15px;

							img {
								width: 100%;
								height: 100%;
							}
						}

						.info {
							width: calc(100% - 120px);

							.s_tit {
								font-size: 15px;
								font-weight: 400;
								color: #375fe8;
								line-height: 22px;
							}
						}

						margin-bottom: 27px;
					}
				}
			}
		}

	}

	#head_text {
		text-align: center;
		color: #fe6602;
		font-size: 14px;
		line-height: 17px;
		margin-bottom: 10px;
	}
</style>